<template>
  <div class="layout">
    <!-- header -->
    <div class="nav">
      <div class="nav-content">
        <el-row>
          <el-col :span="3">
            <router-link to="/" class="logo-div">
              <img src="../assets/images/head.jpg" class="logo" />
            </router-link>
          </el-col>
          <el-col :span="16">
            <el-menu
              :default-active="topNum"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="1">
                <router-link to="/">首页</router-link>
              </el-menu-item>
              <el-menu-item index="2">
                <router-link to="/artList">文章</router-link>
              </el-menu-item>
              <el-menu-item index="3">
                <router-link to="/history">成长史</router-link>
              </el-menu-item>
              <el-menu-item index="4">
                <router-link to="/about">留言</router-link>
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="4">
            <div class="nav-right" v-if="!isLogin">
              <el-button
                class="el-button el-button--primary el-button--small"
                @click="diaLogin=true"
              >登陆</el-button>
              <el-button
                class="el-button el-button--danger el-button--small"
                @click="diaRegister=true"
              >注册</el-button>
            </div>
            <div class="nav-right" v-if="isLogin">
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{userName}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="signOut">退出登陆</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- content layout -->
    <div class="main">
      <div class="left">
        <router-view />
      </div>
      <div class="right">
        <img src="../assets/images/head.jpg" alt class="right-logo animated infinite heartBeat" />
        <p class="title">Xiumin Wang</p>
        <hr />
        <div class="tags">
          <p class="tags-title">标签云</p>
          <div class="tags-box">
            <a
              href="javascript:;"
              class="item"
              v-for="(item,index) in tags"
              :key="index"
            >{{item.name}}</a>
          </div>
        </div>
        <hr />
        <div class="call">
          <div class="callMe">骚扰我吧</div>
          <div class="code">
            <div class="code-left">
              <img src="../assets/images/add_weixin.jpg" alt />
            </div>
            <div class="code-right">
              <p class="top">全栈修炼</p>
              <p>
                <span>前端</span>
                <span>|</span>
                <span>后端</span>
                <span>|</span>
                <span>全栈</span>
              </p>
              <p>让每一个bug为你的思想插上电</p>
              <p>让bug见证我们的成长！</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="footer">全栈修炼 ©2019 Created by Xiumin Wang</div>
    <!-- 登陆模态 -->
    <el-dialog title="用户登陆" :visible.sync="diaLogin">
      <el-form :model="form1">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form1.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form1.password" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="diaRegister = false">取 消</el-button>
        <el-button type="primary" @click="login">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 注册模态 -->
    <el-dialog title="用户注册" :visible.sync="diaRegister">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input v-model="form.confirm" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="diaRegister = false">取 消</el-button>
        <el-button type="primary" @click="register">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "2",
      tags: [],
      diaLogin: false,
      diaRegister: false,
      formLabelWidth: "120px",
      form: {
        name: "",
        password: "",
        confirm: ""
      },
      form1: {
        name: "",
        password: ""
      },
      isLogin: false,
      userName: ""
    };
  },
  computed: {
    topNum() {
      return this.$store.state.common.topNum;
    }
  },
  methods: {
    handleSelect(index) {
      this.$store.dispatch("setToNum", index);
    },
    getTags() {
      var that = this;
      that
        .$ajax({
          url: "/no/listLabel"
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.tags = res.data.data.data;
            }
          },
          res => {
            console.log(res);
          }
        );
    },
    // 注册
    register() {
      var that = this;
      that
        .$ajax({
          url: "/users/register",
          method: "post",
          data: {
            form: that.form
          }
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.$message({
                message: res.data.message,
                type: "success"
              });
            } else if (res.data.code == 500) {
              that.$message({
                message: res.data.message,
                type: "warning"
              });
            }
            setTimeout(() => {
              that.form.name = "";
              that.form.password = "";
              that.form.confirm = "";
              that.diaRegister = false;
            }, 1500);
          },
          res => {
            console.log(res);
          }
        );
    },
    // 登陆
    login() {
      var that = this;
      that
        .$ajax({
          url: "/users/login",
          method: "post",
          data: {
            form: that.form1
          }
        })
        .then(
          res => {
            if (res.data.code == 200) {
              window.sessionStorage.setItem("token", res.data.data.token);
              window.sessionStorage.setItem("name", res.data.data.name);
              window.sessionStorage.setItem("id", res.data.data.id);
              that.userName = res.data.data.name;
              that.isLogin = true;
              that.$store.dispatch("setIsLogin", true);
              that.$message({
                message: res.data.message,
                type: "success"
              });
            } else if (res.data.code == 500) {
              that.$message({
                message: res.data.message,
                type: "warning"
              });
            }
            setTimeout(() => {
              that.form1.name = "";
              that.form1.password = "";
              that.diaLogin = false;
            }, 1500);
          },
          res => {
            console.log(res);
          }
        );
    },
    // 退出登陆
    signOut() {
      var that = this;
      that
        .$ajax({
          url: "/api/signOut",
          method: "post",
          data: {
            token: window.sessionStorage.getItem("token")
          }
        })
        .then(
          res => {
            if (res.data.code == 200) {
              window.sessionStorage.clear();
              that.isLogin = false;
              that.$store.dispatch("setIsLogin", false);
              that.$message({
                message: res.data.message,
                type: "success"
              });
            }
          },
          res => {
            console.log(res);
          }
        );
    }
  },
  mounted() {
    this.getTags();
    if (window.sessionStorage.getItem("name")) {
      this.userName = window.sessionStorage.getItem("name");
      this.isLogin = true;
    }
  }
};
</script>
<style scoped>
.layout {
  widows: 100%;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}
.nav .nav-content {
  width: 1200px;
  margin: 0 auto;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.nav .logo {
  height: 50px;
  border-radius: 50%;
  margin-top: 5px;
}
.nav .nav-right {
  text-align: right;
  padding-top: 15px;
}
/* main */
.main {
  width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.main .left {
  width: 830px;
  padding-right: 20px;
  padding-top: 20px;
  box-sizing: border-box;
}
.main .right {
  width: 350px;
  text-align: center;
}
.main .right .right-logo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin-top: 60px;
}
.main .right .title {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 40px;
}
.main .right .tags {
  padding: 5px 0 20px 0;
  margin-bottom: 10px;
}
.main .right .tags .tags-title {
  font-size: 14px;
  color: #969696;
}
.main .right .tags .tags-box .item {
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #eee;
  color: #333;
  margin: 10px 10px 0 0;
  text-decoration: none;
}
.main .right .call .callMe {
  font-size: 14px;
  color: #969696;
}
.main .right .call .code {
  display: flex;
  justify-content: space-around;
  background-color: skyblue;
  padding: 20px;
  margin-top: 30px;
}
.main .right .call .code .code-left {
  width: 150px;
  height: 150px;
}
.main .right .call .code .code-left img {
  width: 100%;
  height: 100%;
}
.main .right .call .code .code-right .top {
  font-size: 28px;
  font-weight: 700;
  color: #000;
}
.main .right .call .code .code-right p {
  margin-top: 10px;
  font-size: 16px;
}
.main .right .call .code .code-right p span {
  font-size: 14px;
}
/* footer */
.footer {
  text-align: center;
  /* margin-top: 30px; */
  padding: 20px;
  font-weight: 700;
}
</style>


